<template>
	<div>
		<!-- 在线客服 -->
		<OnlineService></OnlineService>
		<!-- 更多 -->
		<div v-show="moreShow" class="more-men">
			<ul class="more-option">
				<span class="triangle"></span>
				<li class="more-list" @click="kipt(more.router)" v-for="more in moreList" :key="more.index">
					<span :class="more.backImg"></span>
					<p>{{ more.title }}</p>
				</li>
			</ul>
		</div>
		<div class="header-de">
			<div class="header-de-icon">
				<span @click="back"></span>
				<span @click="more"></span>
			</div>
			<CarrouselDetail :swiperImg="thisGoodsInfo.imgBanner"></CarrouselDetail>
		</div>
		<!-- 内容 -->
		<div class="content-dtail-box">
			<!-- 名字 -->
			<div class="goods-title">
				<h6>{{ thisGoods.name }}</h6>
				<div class="goods-price">
					<p>
						<span>￥</span>
						{{ thisGoods.price }}
						<span class="prciey">￥{{ thisGoods.pricey }}</span>
						{{ thisGoodsInfo.discount }}折
					</p>
					<p>已售出{{ thisGoods.salesVolume }}件</p>
				</div>
				<p class="fit">
					适合用途：
					<span v-for="purpose in thisGoodsInfo.purpose" :key="purpose.index">{{ purpose }}|</span>
				</p>
				<p class="fit">
					适合对象：
					<span v-for="target in thisGoodsInfo.target" :key="target.index">{{ target }}|</span>
				</p>
			</div>

			<!-- 数量 -->
			<div class="num-box">
				<p class="info-title">数量：</p>
				<span class="num-box-span"><Subtract :num="num" :goodsId="thisGoods.id" @clickHandle="numSub"></Subtract></span>
				<input type="text" :value="num" />
				<span><AddInto :num="num" :goodsId="thisGoods.id" @clickHandle="numAdd"></AddInto></span>
			</div>
			<!-- 配送 -->
			<div class="distribution">
				<p class="info-title">配送：</p>
				<p>
					<span>全国 （可配送至全国1000多个城市）</span>
					<span>22:00前下单，1-2小时可送达；22:00后下单，预计明日送达。若咨询客服，22:00后下单，1-2小时可送达。</span>
				</p>
			</div>
			<div class="gd"></div>
			<!-- 详情 -->
			<div class="goods-info">
				<p class="info-title">
					材料：
					<span>{{ thisGoodsInfo.material }}</span>
				</p>
				<p class="info-title">
					花语：
					<span>{{ thisGoodsInfo.language }}</span>
				</p>
				<p class="info-title">
					包装：
					<span>{{ thisGoodsInfo.packing }}</span>
				</p>
				<p class="info-title">
					附送：
					<span>免费附送精美贺卡，代写您的祝福。(您下单时可填写留言栏)</span>
				</p>
				<p class="info-title">
					配送：
					<span>全国 （可配送至全国1000多个城市，市区免配送费）</span>
				</p>
				<p class="info-title">
					说明：
					<span>由于鲜花包扎各地的花艺师不同，可能在花束的形式和搭配上与图片不完全一致，但我们保证鲜花的主花材品种、新鲜程度、数量、颜色与说明一致，谢谢。</span>
				</p>
			</div>

			<!-- 小广告 -->
			<ul class="small-adv-box">
				<li>
					<span></span>
					<p>优质花材</p>
				</li>
				<li>
					<span></span>
					<p>鲜花知名品牌</p>
				</li>
				<li>
					<span></span>
					<p>高效鲜花遍地</p>
				</li>
				<li>
					<span></span>
					<p>无忧售后</p>
				</li>
			</ul>

			<!-- 选项卡 -->
			<div class="deta-tab-box">
				<ul class="deta-tab">
					<li :class="tabCheck == 0 ? 'li-check' : ''" @click="tabCheckClick(0)">商品详情</li>
					<li :class="tabCheck == 1 ? 'li-check' : ''" @click="tabCheckClick(1)">买家口碑</li>
					<li :class="tabCheck == 2 ? 'li-check' : ''" @click="tabCheckClick(2)">购买须知</li>
				</ul>
				<!-- 选项卡内容 -->
				<div class="tab-info-box">
					<!-- 详情 -->
					<div v-show="tabCheck == 0" class="tab-info-det">
						<img src="http://i.huasongwang.com/i/g/2019/10/18/06247386798674111.jpg" alt="" />
						<img src="http://i.huasongwang.com/i/g/2019/10/18/06247386788567129.jpg" alt="" />
						<img :src="imgPath" alt="ffff" v-for="imgPath in thisGoodsInfo.imgDetails" :key="imgPath.index" />
						<img src="http://i.huasongwang.com/i/g/2019/10/20/06248982352724483.jpg" alt="" />
						<img src="http://i.huasongwang.com/i/g/2019/10/20/06248982205152630.jpg" alt="" />
						<img src="http://i.huasongwang.com/i/g/2019/10/20/06248982188360244.jpg" alt="" />
						<img src="http://i.huasongwang.com/i/g/2019/10/20/06248982187380253.jpg" alt="" />
						<img src="http://i.huasongwang.com/i/g/2019/10/20/06248982189352623.jpg" alt="" />
						<img src="http://i.huasongwang.com/i/g/2019/10/20/06248982190161140.jpg" alt="" />
					</div>
					<!-- 口碑 -->
					<div v-show="tabCheck == 1" class="tab-info-word">
						<div v-for="praise in praiseList" :key="praise.index"><Praise></Praise></div>
						<router-link to="">查看全部评论</router-link>
					</div>
					<!-- 须知 -->
					<div v-show="tabCheck == 2" class="tab-info-notice">
						<img src="http://i.huasongwang.com/i/c/gou1.png" alt="" />
						<img src="http://i.huasongwang.com/i/c/gou2.png" alt="" />
						<router-link to="">更多内容</router-link>
					</div>
				</div>
			</div>
			<div class="gd"></div>
			<div class="footer-detail"><FooterSub></FooterSub></div>
		</div>

		<!-- 底部按钮 -->
		<ul class="footer-btn">
			<li>
				<a href="https://w25.53kf.com/m.php?kf_sign=zIyODMTU5NA2NDExNjk5MjgyNzc2MDA1NzIyMTU2ODQ%253D\&arg=10215684\&style=1\&cid=72215684">
					<span></span>
					<p>客服</p>
				</a>
			</li>
			<li @click="telephoneOrder">
				<span></span>
				<p>电话订购</p>
			</li>
			<li @click="addCart">加入购物车</li>
			<li @click="buyNow">立即购买</li>
		</ul>

		<div class="addSuccess" v-show="addSuccess">
			<div class="tips-box">
				<h5>
					<span></span>
					成功加入购物车
				</h5>
				<p>购物车已有{{ $store.state.cartList.length }}件商品！</p>
				<ul>
					<li @click="keepBuying">继续购物</li>
					<li @click="settlement">去购物车结算</li>
				</ul>
			</div>
		</div>

		<div v-show="showNumTipt" class="numTipt" :style="{ opacity: transparent }">该商品最低购买量为：1件</div>
	</div>
</template>

<script>
import CarrouselDetail from '@/components/carrouselDetail.vue'; //轮播图
import FooterSub from '@/components/footerSub.vue'; //底部
import OnlineService from '@/components/onlineService.vue'; //在线客服
import AddInto from '@/components/addInto.vue'; //数量加
import Subtract from '@/components/subtract.vue'; //数量减
import Praise from '@/components/praiseSub.vue'; //口碑
export default {
	name: 'detail',
	data() {
		return {
			swiperImg: [
				'http://i.huasongwang.com/i/g/2016/06/03/05182853607536029_1280.jpg',
				'http://i.huasongwang.com/i/g/2016/05/13/05164522091167583_1280.jpg',
				'http://i.huasongwang.com/i/g/2016/05/13/05164522091167583_1280.jpg'
			],
			moreShow: false,
			moreList: [
				{
					title: '首页',
					router: '/home',
					backImg: 'home'
				},
				{
					title: '分类',
					router: '/sort',
					backImg: 'sort'
				},
				{
					title: '购物车',
					router: '/cart',
					backImg: 'cart'
				},
				{
					title: '我的',
					router: '/myIndex',
					backImg: 'my'
				}
			],
			tabCheck: 0,
			thisGoods: {},
			thisGoodsInfo: {},
			praiseList: [1, 2, 3, 4, 5],
			num: 1,
			showNumTipt: false,
			// cartNum: 0,
			addSuccess: false,
			auto: null,
			transparent: 1
		};
	},
	methods: {
		/* 返回 */
		back() {
			this.$router.go(-1);
		},

		/* 更多 */
		more() {
			this.moreShow = !this.moreShow;
		},

		/* 跳转 */
		kipt(kiptRouter) {
			let thisPath = this.$route.path;
			// let toFullPath = localStorage.getItem("toFullPath");
			if (thisPath == kiptRouter) {
				window.location.reload();
				// this.moreShow = !this.moreShow;
			} else {
				this.$router.push(kiptRouter);
				if (kiptRouter == '/myIndex') {
					window.location.reload();
				}
			}
		},
		
		/* 数量减 */
		numSub(res) {
			if (res.result < 1) {
				clearInterval(this.auto);
				this.showNumTipt = true;
				this.auto = setInterval(() => {
					this.transparent -= 0.05;
					if (this.transparent <= 0.1) {
						this.showNumTipt = false;
						this.transparent = 1;
						clearInterval(this.auto);
					}
				}, 100);
			} else {
				this.num = res.result;
			}
		},
		
		/* 数量加 */
		numAdd(res) {
			this.num = res.result;
		},
		
		/* 选项卡选中 */
		tabCheckClick(res) {
			this.tabCheck = res;
		},
		
		/* 电话订购 */
		telephoneOrder() {
			window.location.href = 'tel://15977815275';
		},
		
		/* 加入购物车 */
		addCart() {
			let gods = this.thisGoods;
			let num = this.num;
			/* 封装购物车商品 */
			let goodsCart = { ...gods, num };
			/* 动态管理器同步添加 */
			this.$store.commit("setCartList",{
				action:"ADD",
				goods:goodsCart
			})
			// 加入成功提示
			this.addSuccess = true;
		},

		/* 立即购买 */
		buyNow() {
			this.$router.push('/cart');
		},

		/* 继续选购 */
		keepBuying() {
			this.addSuccess = false;
		},

		/* 前往购物车 */
		settlement() {
			this.$router.push('/cart');
		}
	},
	mounted() {
		document.querySelector('.more-men').style.height = document.documentElement.clientHeight + 'px';
		document.querySelector('.addSuccess').style.height = document.documentElement.clientHeight + 'px';
	},
	created() {
		/* 商品信息 */
		this.axios.get('https://www.fastmock.site/mock/db3aaecafecce7bef237fef166118389/huayu/huayu-sortS-datas').then(res => {
			// console.log(res);
			res.goodsList.forEach(item => {
				if (item.id == this.$route.query.goodsId) {
					this.thisGoods = item;
				}
			});
		});
		/* 商品详情 */
		this.axios.get('https://www.fastmock.site/mock/db3aaecafecce7bef237fef166118389/huayu/huayu-detali-data').then(res => {
			// console.log(res);
			res.forEach(item => {
				if (item.id == this.$route.query.goodsId) {
					this.thisGoodsInfo = item;
				}
			});
		});
	},
	beforeDestroy() {
		clearInterval(this.auto);
	},
	components: {
		CarrouselDetail,
		FooterSub,
		OnlineService,
		AddInto,
		Subtract,
		Praise
	}
};
</script>

<style scoped>
@import url('../css/publice.css');
.header-de {
	width: 100%;
	padding: 0;
	height: 7.5rem;
	position: relative;
}

.header-de-icon {
	position: absolute;
	top: 0;
	z-index: 6;
	width: 100%;
	height: 1.12rem;
	display: flex;
	justify-content: space-between;
	padding: 0 0.4rem;
}

.header-de-icon span {
	margin-top: 16px;
	background-repeat: no-repeat;
	background-image: url(http://i.huasongwang.com/i/c/icon7.png);
	display: block;
	width: 36px;
	height: 36px;
	background-position: -4px -5px;
	background-size: 550%;
}

.header-de-icon span:last-child {
	background-position: -59px -5px;
}

/* 更多按钮 */
.more-men {
	position: fixed;
	top: 0rem;
	z-index: 5;
	width: 100%;
	background: rgba(0, 0, 0, 0.5);
}

.more-option {
	width: 2.04rem;
	height: 3rem;
	background-color: white;
	float: right;
	/* margin-top: 1.3rem;
	margin-right: 0.3rem; */
	position: relative;
	top: 7%;
	right: 0.05rem;
}

.triangle {
	position: absolute;
	top: -0.26rem;
	right: 10px;
	width: 26px;
	height: 22px;
	background-position: 0px 1px;
	background-image: url(http://i.huasongwang.com/i/c/search_top.png);
	background-repeat: no-repeat;
}

.more-list {
	width: 100%;
	height: 25%;
	border-bottom: gainsboro solid 0.01rem;
	display: flex;
	align-items: center;
	padding-left: 0.2rem;
}

.more-list span {
	width: 22px;
	height: 22px;
	background-image: url(http://i.huasongwang.com/i/c/icon6.png);
	background-repeat: no-repeat;
	background-size: 400%;
}

.home {
	background-position: -5px -46px;
}

.sort {
	background-position: -26px -46px;
}

.cart {
	background-position: -45px -46px;
}

.my {
	background-position: -65px -46px;
}

.more-list p {
	padding-left: 0.2rem;
	color: #666666;
}

/* 内容 */
.content-dtail-box {
	width: 100%;
	padding-bottom: 1rem;
}

/* 名字 */
.goods-title {
	width: 100%;
	height: 2.64rem;
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
}

.goods-title h6 {
	height: 0.64rem;
	font-size: 0.35rem;
	line-height: 0.64rem;
	padding: 0 0.15rem;
}

.goods-price {
	width: 100%;
	height: 0.54rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 0.01rem solid #ddd;
	margin-bottom: 0.3rem;
	padding: 0 0.15rem;
}

.goods-price p:first-child {
	color: #e52f2f;
	font-size: 0.32rem;
}

.goods-price p span {
}

.prciey {
	color: #777;
	text-decoration: line-through;
	padding-right: 0.25rem;
}

.goods-price p:last-child {
	font-size: 0.25rem;
	color: #666;
}

.fit {
	width: 100%;
	height: 0.48rem;
	color: #666;
	line-height: 0.48rem;
	font-size: 0.23rem;
	padding: 0 0.15rem;
}

/* 数量 */
.num-box {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0.2rem 0.15rem;
	border-bottom: 0.01rem solid #ddd;
}

.num-box p {
	padding: 0.15rem 0;
}

.num-box span {
	width: 0.56rem;
	height: 0.56rem;
	border: 0.01rem solid #ddd;
	display: flex;
	justify-content: center;
	align-items: center;
}

.num-box-span {
	border-radius: 0.1rem 0 0 0.1rem;
}

.num-box input {
	width: 1rem;
	height: 0.52rem;
	border: 0.01rem solid #ddd;
	text-align: center;
}

.num-box span:last-child {
	border-radius: 0 0.1rem 0.1rem 0;
}

.info-title {
	color: #a2a4a6;
	font-size: 0.23rem;
}

/* 配送 */
.distribution {
	width: 100%;
	display: flex;
	padding: 0.2rem 0.15rem 0 0.15rem;
}

.distribution p:last-child {
	width: 4.76rem;
}

.distribution p:last-child span {
	min-height: 0.4rem;
	display: flex;
	align-items: center;
	font-size: 0.23rem;
	color: #666666;
}

.distribution p:last-child span:last-child {
	margin-top: 0.2rem;
}

/* 过度 */
.gd {
	width: 100%;
	height: 0.2rem;
	background-color: #f5f5f5;
}

/* 详情 */
.goods-info {
	width: 100%;
	padding: 0 0.15rem;
	margin-top: 0.2rem;
}

.goods-info p {
	margin: 0.2rem 0;
	display: flex;
	align-items: flex-start;
}

.goods-info span {
	width: 6rem;
	color: #333;
	font-size: 0.23rem;
}

/* 小广告 */
.small-adv-box {
	width: 100%;
	height: 0.88rem;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
}

.small-adv-box li {
	padding-right: 0.1rem;
	height: 0.48rem;
	display: flex;
	align-items: center;
	font-size: 0.22rem;
	color: #777;
}

.small-adv-box li span {
	width: 21px;
	height: 21px;
	background-image: url(http://i.huasongwang.com/i/c/icon7.png);
	background-repeat: no-repeat;
	background-size: 300px;
}

.small-adv-box li:nth-child(1) span {
	background-position: -127px -83px;
}

.small-adv-box li:nth-child(2) span {
	background-position: -163px -83px;
}

.small-adv-box li:nth-child(3) span {
	background-position: -197px -83px;
}

.small-adv-box li:nth-child(4) span {
	background-position: -231px -83px;
}

/* 选项卡 */
.deta-tab-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.deta-tab {
	width: 100%;
	height: 1.04rem;
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-bottom: 0.01rem solid #ddd;
}

.deta-tab li {
	width: 33%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.3rem;
	border-bottom: 0.04rem solid white;
}

.deta-tab .li-check {
	color: #f42424;
	border-bottom: 0.04rem solid #f42424;
}

.tab-info-box {
	width: 100%;
}

.tab-info-box div {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 详情 */
.tab-info-det {
	width: 100%;
	margin-top: 0.5rem;
}

.tab-info-det img {
	width: 98%;
}

/* 口碑 */
.tab-info-word {
	width: 100%;
	padding: 0 0.2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tab-info-word a {
	width: 2.53rem;
	height: 0.62rem;
	border: 0.01rem solid #eee;
	border-radius: 0.1rem;
	text-align: center;
	line-height: 0.62rem;
	font-size: 0.25rem;
	margin: 0.25rem 0;
}

/* 须知 */
.tab-info-notice {
}

.tab-info-notice img {
	width: 100%;
}

.tab-info-notice a {
	border: 0.01rem solid #eee;
	width: 80%;
	height: 0.6rem;
	text-align: center;
	line-height: 0.6rem;
	border-radius: 0.4rem;
}

/* 底部 */
.footer-detail {
	width: 100%;
	margin-top: 0.1rem;
}

.footer-btn {
	width: 100%;
	height: 1.1rem;
	display: flex;
	align-items: center;
	border-top: 0.01rem solid #ddd;
	position: fixed;
	bottom: 0;
	z-index: 5;
}

.footer-btn a {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}

.footer-btn li:nth-child(1),
.footer-btn li:nth-child(2) {
	width: 20%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: white;
}

.footer-btn li span {
	background-repeat: no-repeat;
	background-image: url(http://i.huasongwang.com/i/c/icon7.png);
	width: 32px;
	height: 32px;
	background-size: 250px;
}

.footer-btn li:nth-child(1) {
	border-right: 0.01rem solid #ddd;
}

.footer-btn li:nth-child(1) span {
	background-position: -8px -159px;
}

.footer-btn li:nth-child(2) span {
	background-position: -45px -159px;
}

.footer-btn li:nth-child(3),
.footer-btn li:nth-child(4) {
	width: 30%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
}

.footer-btn li:nth-child(3) {
	background-color: #b3a078;
}

.footer-btn li:nth-child(4) {
	background-color: #b4272d;
}

/* 加入成功 */
.addSuccess {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.4);
	position: fixed;
	top: 0;
	z-index: 8;
}

.tips-box {
	width: 5.1rem;
	height: 2.8rem;
	background-color: white;
	border-radius: 0.1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
	position: relative;
	top: -0.4rem;
}

.tips-box h5 {
	width: 100%;
	height: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0.16rem 0;
	font-size: 0.4rem;
	color: #666666;
}

.tips-box h5 span {
	width: 30px;
	height: 30px;
	background: url(http://i.huasongwang.com/i/c/icon_succ.png) no-repeat;
	background-size: 30px;
	margin-right: 0.1rem;
}
.tips-box p {
	width: 100%;
	font-size: 0.23rem;
	color: #666666;
	padding-left: 0.5rem;
}
.tips-box ul {
	width: 100%;
	height: 0.76rem;
	display: flex;
	align-items: center;
}

.tips-box ul li {
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.3rem;
	border: 0.01rem solid ghostwhite;
}

.tips-box ul li:first-child {
	color: #da0000;
}

.tips-box ul li:last-child {
	color: #40affe;
}

/* 数量最小提示 */
.numTipt {
	position: fixed;
	top: 50%;
	left: 20%;
	z-index: 6;
	width: 4.78rem;
	height: 0.92rem;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.3rem;
	color: white;
}
</style>
